<template>
  <div v-if="loading" class="loading">
    <p>正在加载第三方登录授权页面...</p>
  </div>
  <div v-else-if="error" class="error">
    <p>{{ error }}</p>
  </div>
</template>

<script setup>

// 定义 loading 和 error 变量
const loading = ref(true);
const error = ref(null);

const redirectToThirdParty = async (provider) => {
  try {
    // 请求后端获取认证URL
    const response = await axios.get(`/api/auth/login/${provider}/`);
    // 使用获取到的URL进行重定向
    window.location.href = response.data.auth_url;
  } catch (error) {
    console.error('获取认证URL失败:', error);
    error.value = '获取认证URL失败，请重试。';
  } finally {
    loading.value = false;
  }
};

const route = useRoute();

onMounted(() => {
  const provider = route.path.split('/').filter(Boolean).pop(); // 获取路径中的最后一个部分作为provider
  if (provider) {
    redirectToThirdParty(provider);
  } else {
    error.value = '无效的授权URL';
    loading.value = false;
  }
});
</script>

<style scoped>
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 20px;
  color: #333;
}

.error {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 20px;
  color: red;
}
</style>
